import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/pages/Home"
import Discover from "@/pages/Discover"


//把路由注册到所有的子组件
Vue.use(VueRouter);

//定义路由配置，一般由path和components组成
//步骤：
  //1.构建视图组件
  //2.配置routes，一个path映射一个component
  //3.router-view 配置视口

const routes = [
  {
    name:"home",
    path: "/home",
    props:true,
    component: Home
  },
  {
    path: "/discover",    //路径不区分大小写
    component: Discover,
    //children这个属性和routes基本一致
    //二级路径前面不要带/
    children:[
      {
        name:"Toplist",
        path:"Toplist",
        // component:()=>import(/* webpackChunkName:'toplist'*/ "@/pages/Discover/Toplist")
        
        //多视图写法
        components: {
          toplist:()=>import(/* webpackChunkName:'toplist'*/ "@/pages/Discover/Toplist"),
          djradio:()=>import(/* webpackChunkName:'djradio'*/ "@/pages/Discover/DJradio")

        }
      },
      {
        path:"DJradio",
        component:()=>import(/* webpackChunkName:'djradio'*/ "@/pages/Discover/DJradio")
      }
    ]
  },
  {
    path:"/friend",
    //路由懒加载，也叫按需加载
    //将这段代码进行切割，针对首屏页面加载缓慢的问题，可以加快首屏的渲染速度
    component:()=>import(/* webpackChunkName:'friend'*/ "@/pages/Friend")
  },
  //匹配优先级,按先定义的路径来
  {
    path:"/goods",
    component:()=>import(/* webpackChunkName:'goods'*/ "@/pages/Goods")
  },
  // {
  //   path:"/goods",
  //   component:()=>import ("@/pages/Page404")
  // },
  {
    //动态路由，是在路径下用冒号展示
    path:"/detail/:id",
    //解耦
    props:true,
    component:()=>import(/* webpackChunkName:'details'*/ "@/pages/Detail")
  },
  // {
  //   path:"*",
  //   component:()=>import(/* webpackChunkName:''*/ "@/pages/Page404")
  // },
  {
    path:"/count",
    component:()=>import(/* webpackChunkName:'count'*/ "@/pages/Count")
  },
  {
    //重定向
    path:"/",
    redirect: "/axios"
  },
  {
    path:"/gouwuche",
    component:()=>import(/* webpackChunkName:'Gouwuche'*/ "&/pages/Gouwuche")
  },
  {
    path:"/axios",
    component:()=>import(/* webpackChunkName:'AxiosUse'*/ "@/pages/AxiosUse")
  }

];

const router = new VueRouter({
  //mode:"hash"       //默认是哈希
  //mode:"history",   //地址栏没有#
  //mode:"abstract",    //地址栏没有子目录
  routes,
});

export default router;
